import React, {Component} from "react"
import BoilingVerdict from "./BoolingVerdict"
import TemperatureInput from "./TemperatureInput"
import tryConvert from "./utils/index"


type Istate = {
    temperature: string
    scale: string
}

interface Cal {
    handleChange:(e:any)=>void
    handleCelsiusChange:(t:string)=>void
    handleFahrenheitChange:(t:string)=>void

}
class Calculator extends Component<any,Istate> implements Cal{
    state={
        temperature:'' ,
        scale:"c"
    }
    handleChange = (e:React.ChangeEvent<any>) =>{
        this.setState({temperature:e.target.value})
    }
    handleCelsiusChange = (temperature:string) =>{
        console.log(temperature);
        this.setState({
            temperature:temperature,
            scale:"c"
        })       
        
    }
    handleFahrenheitChange = (temperature:string) =>{
        console.log(temperature);
        this.setState({
            temperature:temperature,
            scale:"f"
        })       
        
    }
    render() {
        let {temperature,scale} = this.state
        let celsius = scale === "c" ? temperature : tryConvert('toCelsius',temperature)
        let faHrenheit = scale === "f" ? temperature : tryConvert('toFahrenheit',temperature)
        // let celsius = scale === "c" ? temperature : tryConvert(temperature,'toCelsius')
        // let faHrenheit = scale === "f" ? temperature : tryConvert(temperature,'toFahrenheit')
        console.log(celsius,'--',faHrenheit);
        

        return(
            <fieldset>
                <legend>Calculator</legend>
                <TemperatureInput scale='c' 
                onTemperatureChange={this.handleCelsiusChange}
                temperature={celsius}/>
                <TemperatureInput scale='f' 
                onTemperatureChange={this.handleFahrenheitChange}
                temperature={faHrenheit}/>
                <BoilingVerdict temperature={celsius}/>
            </fieldset>
        )
    }
}

export default Calculator